function TodoItem({ todo, toggleTodo, deleteTodo }: any) {
  return (
    <li className="flex items-center justify-between p-3 bg-white border border-gray-200 rounded-lg shadow-sm">
      <span className={`flex-1 ${todo.completed ? "line-through text-gray-400" : "text-gray-700"}`}>
        {todo.text}
      </span>
      <div className="flex gap-2 whitespace-nowrap">
        <button 
          onClick={() => toggleTodo(todo.id)}
          className="px-3 py-1 text-sm text-blue-600 border border-blue-600 rounded-md hover:bg-blue-50"
        >
          {todo.completed ? '取消完成' : '完成'}
        </button>
        <button 
          onClick={() => deleteTodo(todo.id)}
          className="px-3 py-1 text-sm text-red-600 border border-red-600 rounded-md hover:bg-red-50"
        >
          删除
        </button>
      </div>
    </li>
  );
}
export default TodoItem;